<template>
	<view>
		<scroll-view style="flex:1">
		    <view class="container">
		      <!-- 进度条 -->
		      <view class="progress-section">
		        <uni-steps class="steps-box" :options="stepsOptions" :active="2" activeColor="#2979ff" />
		      </view>
		
		      <!-- 用户信息 -->
		      <view class="form-section">
		        <view class="section-title">
		          <text class="title-text">我的资料</text>
		        </view>
		        <view>
		          <view class="form-item uni-row infoList">
					  <view class="form-item" style="width: 30%;">
						  <text class="label">姓名</text>
					  </view>
					  <view class="form-item" style="width: 70%;">
						  <text class="value">{{formData.name}}</text>
					  </view>
		          </view>
				  <view class="form-item uni-row infoList">
					  <view class="form-item" style="width: 30%;">
						  <text class="label">电话</text>
					  </view>
					  <view class="form-item" style="width: 70%;">
						  <text class="value">{{formData.phone}}</text>
					  </view>
				  </view>
				  <view class="form-item uni-row infoList">
					  <view class="form-item" style="width: 30%;">
						  <text class="label">性别</text>
					  </view>
					  <view class="form-item" style="width: 70%;" v-if="formData.sex == 1">
						  <text class="value">女</text>
					  </view>
					  <view class="form-item" style="width: 70%;" v-if="formData.sex == 2">
						  <text class="value">男</text>
					  </view>
				  </view>
				  <view class="form-item uni-row infoList">
					  <view class="form-item" style="width: 30%;">
						  <text class="label">身份证号</text>
					  </view>
					  <view class="form-item" style="width: 70%;">
						  <text class="value">{{formData.card_id}}</text>
					  </view>
				  </view>
					<view class="form-item uni-row infoList">
		 			  <view class="form-item" style="width: 30%;">
		 				  <text class="label">生日</text>
		 			  </view>
		 			  <view class="form-item" style="width: 70%;">
		 				  <text class="value">{{formData.birthday}}</text>
		 			  </view>
					</view>
		          <view class="form-item uni-row infoList">
		            <view class="form-item" style="width: 30%;">
		          	  <text class="label">年龄</text>
		            </view>
		            <view class="form-item" style="width: 70%;">
		          	  <text class="value">{{formData.age}}岁</text>
		            </view>
		          </view>
					<view class="form-item uni-row infoList">
						<view class="form-item" style="width: 30%;">
						  <text class="label">邮箱</text>
						</view>
						<view class="form-item" style="width: 70%;">
						  <text class="value">{{formData.email}}</text>
						</view>
					  </view>
					<view class="form-item uni-row infoList">
						<view class="form-item" style="width: 30%;">
						  <text class="label">下单地址</text>
						</view>
						<view class="form-item" style="width: 70%;">
						  <text class="value">{{formData.address}}</text>
						</view>
					</view>
		        </view>
		      </view>
		
		      <!-- 项目信息 -->
		      <view class="form-section">
		        <view class="section-title">
		          <text class="title-text">已选检测项目</text>
		        </view>
		        <view
		        	class="project-info uni-row" 
		        	v-for="(item, index) in projectInfo"
		        	:key="index">
		        	<view class="info-row flex-item">
		        		<text class="info-content">{{ item.name }}</text>
		        	</view>
		        	<view class="info-row flex-item" style="text-align: right;">
		        		<text class="info-price">¥{{ item.market_price }}</text>
		        	</view>
		        </view>
		        <view style="margin-top: 10rpx;">
		        	<text style="text-align: right;">小计：<text class="info-price">¥{{totalPrice}}</text></text>
		        </view>
		      </view>
			  <!-- <view style="height: 120rpx;"></view> -->
		    </view>
		
		    <!-- 底部按钮 -->
		    <view class="footer">
		      <view class="uni-row">
		        <view class="flex-item">
		          <button class="btn prev-btn" type="default" @click="prevStep">上一步</button>
		        </view>
		        <view class="flex-item">
		          <button class="btn next-btn" type="primary" @click="submitOrder">去支付</button>
		        </view>
		      </view>
		    </view>
		</scroll-view>
		<payment :payMode="payMode" :pay_close="pay_close" @onChangeFun="onChangeFun" :order_id="pay_order_id"
			:totalPrice="doctor_price" :order_type="order_type"></payment>
	</view>
</template>

<script>
	let app = getApp();
	import {
		createDetection,batchUpdatePayStatus
	} from '@/api/detection.js';
	import {
		getUserInfo
	} from "@/api/user";
	import payment from "@/components/payment";
	import {
		mapGetters
	} from "vuex";
	export default {
		components: {
			payment
		},
		computed: mapGetters(['userInfo', 'uid','routeError']),
		data() {
			return {
				stepsOptions: [{
					title: '选择项目'
				},{
					title: '填写信息'
				},{
					title: '确认'
				}],
				formData: {},
				projectInfo: [],
				totalPrice: 0,
				
				// 支付i相关
				pay_close: false,
				pay_order_id: "",
				payMode: [{
						name: "微信支付",
						icon: "icon-weixinzhifu",
						value: "wechat",
						title: "微信快捷支付",
						payStatus: 1
					},
					{
						name: "支付宝支付",
						icon: "icon-zhifubao",
						value: "alipay",
						title: "支付宝支付",
						payStatus: app.globalData.alipay_open
					},
					{
						name: "余额支付",
						icon: "icon-yuezhifu",
						value: "balance",
						title: "可用余额:",
						number: 0,
						payStatus: app.globalData.yue_pay_status
					}
				],
				conversation_id: '',
				doc_mer_id:'',
				audio_time:'',
				isRtc:false,
				order_type:7,//参考payment插件说明
			}
		},
		onLoad() {
			// 获取上一页传递的表单数据
			const formData = uni.getStorageSync('userInfo')
			if (formData) {
			  this.formData = formData
			}
			// 获取项目信息
			const projectInfo = uni.getStorageSync('projectInfo')
			// console.log(projectInfo, "选择的项目")
			if (projectInfo) {
			  this.projectInfo = projectInfo
			}
			const totalPrice = uni.getStorageSync('totalPrice')
			if (totalPrice) {
			  this.totalPrice = totalPrice
			}
		},
		onShow() {
			// 获取余额
			this.getUserInfo();
		},
		methods: {
			prevStep() {
			    uni.navigateBack()
			},
			/**
			 * 获取用户信息
			 *
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo()
					.then(res => {
						that.payMode[2].number = res.data.now_money;
						// that.$set(that, 'payMode', that.payMode);
					})
					.catch(err => {
						return this.$util.Tips({
							title: err
						});
					});
			},
			submitOrder() {
			    // 提交订单逻辑
			    uni.showLoading({
					title: '提交中...'
			    })
				let data = this.formData;
				let ids = []
				this.projectInfo.forEach((item, index) => {
					ids.push(item.id)
				})
				data["d_ids"] = ids.join(",")
				data['totalPrice'] = this.totalPrice;
				data['user_id'] = this.uid;
				createDetection(data).then(res => {
					console.log(res.data.order_id, "提交返回")
					let order_id = res.data.order_id
					uni.setStorageSync('orderId', order_id)
					uni.showToast({
					  title: '提交成功',
					  icon: 'success',
					  duration: 2000,
					  success: () => {
					    // 跳转到成功页面
					    // setTimeout(() => {
					    //   uni.reLaunch({
					    //     url: '/pages/order/order'
					    //   })
					    // }, 2000)
					  }
					})
					this.$set(this, "pay_close", true);
					this.pay_order_id = order_id;
					//rk_ 需要会话ID
					this.conversation_id = order_id;
				});
			},
			/**
			 * 事件回调
			 *
			 */
			onChangeFun: function(e) {
				console.log('rk==>' + JSON.stringify(e));
				let opt = e;
				let action = opt.action || null;
				let value = opt.value != undefined ? opt.value : null;
				action && this[action] && this[action](value);
			},
			/**
			 * 关闭支付组件
			 *
			 */
			payClose: function() {
				this.pay_close = false;
				this.$emit("payClose");
			},
			/**
			 * 支付失败回调
			 *
			 */
			pay_fail: function() {
				this.pay_close = false;
				this.pay_order_id = "";
			},
			/**
			 * 支付成功回调
			 *
			 */
			pay_complete: function() {
				this.pay_close = false;
				// this.pay_order_id = "";
				console.log(this.pay_order_id,"返回支付成功的id")
				//console.log('rk==>[支付成功哦]');
				// conversation_id
				let data = {}
				data['o_id'] = this.pay_order_id;
				data['status'] = 3;
				console.log(data, "111222233")
				batchUpdatePayStatus(data)
					.then(res => {
						console.log(res)
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/shops/detection/order_list/order_list'
							})
						}, 2000);
					})
					.catch(err => {
						return this.$util.Tips({
							title: err
						});
					});
				
			},
		}
	}
</script>

<style lang="scss">
.container {
  padding: 20rpx;
  background-color: #f8f8f8;
  // min-height: 100vh;
}

.progress-section {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx 20rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.form-section {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.section-title {
  margin-bottom: 30rpx;
}

.title-text {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  position: relative;
  padding-left: 24rpx;
  
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6rpx;
    height: 28rpx;
    background-color: #2979ff;
    border-radius: 3rpx;
  }
}

.infoList {
	 border-bottom: 1rpx solid #EAEAEA;
}

.form-item {
  display: flex;
  margin-bottom: 24rpx;
  // height: 60rpx;
  
  .label {
    width: 160rpx;
    font-size: 28rpx;
    color: #666;
  }
  
  .value {
    // flex: 1;
    font-size: 28rpx;
    color: #333;
	text-align: right;
  }
}

.project-info {
	padding: 10rpx;
	background-color: #f8f8f8;
	border-radius: 12rpx;
	display: flex;
}
.info-row {
	margin-bottom: 10rpx;
	/* padding-bottom: 20rpx; */
	width: 50%;
}
.info-content {
	font-size: 24rpx;
	color: #333;
	line-height: 1.5;
	font-weight: 700;
}

.info-content.notice {
	color: #666;
	font-size: 28rpx;
	white-space: pre-line; /* 保留换行符 */
}

.info-price {
	font-size: 24rpx;
	color: #ff6b6b;
	font-weight: 600;
	text-align: right;
}
.btn {
	flex: 1;
	margin: 0 15rpx;
	height: 88rpx;
	line-height: 88rpx;
	border-radius: 20rpx;
	font-size: 32rpx;
	font-weight: 500;
	text-align: center;
}

.prev-btn {
	background-color: #f5f5f5;
	color: #666;
}

.next-btn {
	background: linear-gradient(to right, #2979ff, #5e96ff);
	color: #fff;
}
.footer {
  // position: fixed;
  // left: 0;
  // right: 0;
  // bottom: 0;
  background-color: #fff;
  padding: 20rpx 30rpx;
  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.05);
  
  .price-section {
    padding: 20rpx 0;
    text-align: right;
    border-bottom: 1rpx solid #eee;
    margin-bottom: 20rpx;
    
    .price-label {
      font-size: 28rpx;
      color: #666;
    }
    
    .price-value {
      font-size: 36rpx;
      color: #ff0000;
      font-weight: bold;
    }
  }
  
  .uni-row {
    display: flex;
    justify-content: space-between;
    
    .flex-item {
      width: 300rpx;
      
      button {
        width: 100%;
      }
    }
  }
}
</style>
